<template>
  <div class="createDetail">
    <!-- 头部 -->
    <div class="header">
      <van-icon name="arrow-left" @click="routeBack"/>
      <span class="titie">{{ itemTitle }}</span>
    </div>
    <!-- 文件上传 -->
    <div class="upload_wrap">
      <div class="upload-container">
        <van-uploader>
          <div class="uploadBtn">
            <van-icon name="photograph" style="font-size: 48px" />
            <span class="uploadText">上传照片</span>
          </div>
        </van-uploader>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const list = [
  { id: 1, name: "魔法移除" },
  { id: 2, name: "移除马赛克" },
  { id: 1, name: "去除面具" },
  { id: 1, name: "移除纹身" },
  { id: 1, name: "移除物品" },
];

// 路由回退
const routeBack = () => {
  router.back()
}

// 查询title
const itemTitle = computed(() => {
  const id = route.query.id;
  if (!id) return "";
  const item = list.find((item) => item.id === Number(id));
  return item ? item.name : "";
});
</script>

<style scoped lang="less">
.createDetail {
  width: 100%;
  height: 100vh;
  background: #000;
  box-sizing: border-box;
  padding: 16px;
  .header {
    width: 100%;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid #ccc;
    position: relative;
    text-align: center;
    .van-icon-arrow-left {
      font-size: 16px;
      color: #fff;
      position: absolute;
      left: 14px;
      top: 14px;
    }
    .titie {
      font-size: 16px;
      color: #fff;
      font-weight: 700;
    }
  }
  .upload_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 80px;
    margin-top: 32px;
    .van-uploader {
      width: 100%;
    }
    .upload-container {
      width: 80%;
      text-align: center;
    }
    .uploadBtn {
      width: 100%;
      height: 100%;
      border: 2px dashed rgba(255, 255, 255, 0.5);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      cursor: pointer;
      background-color: #ffffff1a;
    }

    :deep(.van-uploader__input-wrapper){
      width: 100%;
      height: 80vh;
    }
    .uploadText {
      margin-top: 8px;
      font-size: 16px;
      color: #fff;
      line-height: 24px;
    }
  }
}
</style>
